import React, { useState, useEffect, useRef } from 'react';

export default function DragMap(props) {
  const isDown = useRef(false);
  useEffect(() => {
    document.getElementById('graphic').addEventListener('mousedown', dragStart);
    document.getElementById('graphic').addEventListener('mousemove', dragMove);
    document.getElementById('graphic').addEventListener('mouseup', dragEnd);
    return () => {
      document.getElementById('graphic').removeEventListener('mousedown', dragStart);
      document.getElementById('graphic').removeEventListener('mousemove', dragMove);
      document.getElementById('graphic').removeEventListener('mouseup', dragEnd);
    };
  }, []);
  const [value, setValue] = useState('');
  function dragStart(ev) {
    isDown.current = true;
    console.log(ev);
  }
  function dragMove(ev) {
    if (isDown.current) {
      console.log(ev);
    }
  }
  function dragEnd(ev) {
    console.log(ev);
    isDown.current = false;
  }
  return <div>{value}</div>;
}
